<template>
  <div class="register">
    <el-card shadow="never">
      <el-row type="flex" align="middle">
        <el-col :span="15">
          <div class="leftcontent">
            
            <el-form :model="regForm" :rules="regFormRules" ref="regFormRef">
              <p>欢迎注册</p>
              <el-form-item prop="userName">
                <el-input
                  v-model="regForm.userName"
                  placeholder="请输入手机号"
                  prefix-icon="el-icon-mobile-phone"
                  class="userandpwd"
                >
                </el-input>
              </el-form-item>
              <!-- 获取手机验证码部分 -->
              <el-row :gutter="20">
                <el-col :span="9">
                  <el-form-item prop="verifyCode">
                    <el-input
                      v-model="regForm.verifyCode"
                      placeholder="6位短信验证码"
                      prefix-icon="el-icon-tickets"
                      maxlength="6"
                      :readonly="isNotUseful"
                    >
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="9">
                  <el-button type="info" v-if="isNotUseful" disabled
                    >获取验证码</el-button
                  >
                  <el-button
                    @click.prevent="getVerfiy"
                    type="warning"
                    v-else-if="!isdaojishi"
                  >
                    {{ verifyButtonText }}
                    <i
                      :class="
                        showLoadingIcon ? 'el-icon-loading el-icon--right' : ''
                      "
                    ></i
                  ></el-button>
                  <el-button type="info" disabled v-else>
                    {{ verifyButtonText }}
                  </el-button>
                </el-col>
              </el-row>

              <el-form-item prop="password">
                <el-input
                  v-model="regForm.password"
                  placeholder="请输入密码"
                  prefix-icon="el-icon-key"
                  type="password"
                  maxlength="15"
                  class="userandpwd"
                >
                </el-input>
                <div class="el-form-item__error" v-if="checkApiMsg">
                  {{ apiMsg }}
                </div>
              </el-form-item>
              <el-form-item class="btns">
                <el-button
                  style="width:100px;margin-left:90px"
                  type="primary"
                  @click.prevent="regist"
                  >注册</el-button
                >
              </el-form-item>
            </el-form>
          </div>
        </el-col>
        <el-col :span="8">
          <el-row type="flex" justify="center">
            <el-col :span="12">
              <el-button type="primary" @click.prevent="goLogin"
                >已有账号,马上登录</el-button
              >
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    // 验证手机的规则
    var checkMobile = async (rules, value, cb) => {
      if (!value) {
        this.isNotUseful = true
        return cb(new Error('手机号不可为空'))
      }
      const regMoblie = /^((13[0-9])|(14[5|7])|(15([0-3]|[5-9]))|(18[0,5-9]))\d{8}$/
      if (!regMoblie.test(value)) {
        this.isNotUseful = true
        return cb(new Error('请输入合法的手机号'))
      }
      // 查询该手机号是否已经存在
      const { data: res } = await this.isExistUser()
      if (res.code !== '500') {
        this.isNotUseful = true
        return cb(new Error('用户名已存在'))
      }
      this.isNotUseful = false
      return cb()
    }
    return {
      // 后台验证结果信息
      checkApiMsg: false,
      // 获取验证码是否禁用与验证码输入框状态
      isNotUseful: true,
      regForm: {
        userName: '',
        password: '',
        verifyCode: ''
      },
      regFormRules: {
        userName: [{ validator: checkMobile, trigger: 'blur' }],
        password: [
          {
            required: true,
            message: '密码不可为空',
            trigger: 'blur'
          },
          {
            min: 6,
            max: 15,
            message: '用户名长度在6~15个字符之间',
            trigger: 'blur'
          }
        ],
        
        verifyCode: [
          { required: true, message: '验证码不可为空', trigger: 'blur' }
        ]
      },
      showLoadingIcon: false,
      // 后台验证结果
      apiMsg: '',
      verifyButtonText: '获取验证码',
      isdaojishi: false,
      time: 60
    }
  },
  methods: {
    // 获取验证码
    async getVerfiy() {
      this.showLoadingIcon = true
      const { data: res } = await this.$http.get('sendVerifyCode.do', {
        params: {
          userName: this.regForm.userName
        }
      })
      console.log(res)
      if (res.code !== '200') {
        this.showLoadingIcon = false
        return this.$message.error(res.msg + ',请等待2分钟后重试')
      }
      this.showLoadingIcon = false
      // 倒计时60秒
      this.isdaojishi = true
      let me = this   
      const intervalShow = function() {
        me.verifyButtonText = '(' + me.time + 's) 重新获取'
        --me.time
        if (me.time < 0) {
          me.verifyButtonText = '获取验证码'
          me.isdaojishi = false
          me.time = 120
          window.clearInterval(id)
        }
      }
      intervalShow()
      let id = window.setInterval(intervalShow, 1000) 
    },
    // 处理注册的方法
    regist() {
      this.checkApiMsg = false
      if (this.checkApiMsg) return this.$message.error('输入未通过！')
      this.$refs.regFormRef.validate(async valid => {
        if (!valid) return this.$message.error('输入未通过！')
        // 调用注册接口
        const { data: res } = await this.$http.post(
          'registUser.do',
          this.regForm
        )
        if(res.code!=='200'){
          this.checkApiMsg = true
          this.apiMsg = res.data.verifyCode
          return
        }
        this.checkApiMsg = false
        this.$message.success('恭喜注册成功')
        this.$router.push('/login')
      })
    },
    // 返回登录页面
    goLogin() {
      this.$router.push('/login')
    },
    // 根据用户输入的手机号判断是否存在
    isExistUser() {
      return this.$http.get('isExistUser.do', {
        params: {
          userName: this.regForm.userName
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.el-card {
  height: 370px;
  width: 700px;
  left: 50%;
  top: 50%;
  position: absolute;
  transform: translate(-50%, -50%);
  color: #979797;
}

.register {
  height: 100%;
  background-image: url('../../assets/bgzhuce.jpg');
}


.userandpwd {
  width: 280px;
}

.leftcontent {
  border-right: 1px dashed grey;
  display: flex;
  justify-content: center;
}

.showVerfiyError{
  margin: 0 !important;
}
</style>
